import React, { useState } from 'react';
import { Form, Input, Button, Card, message, Typography } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import axios from 'axios';
import './Login.css';

const { Title } = Typography;

const Login = ({ onLoginSuccess }) => {
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    setLoading(true);
    try {
      const response = await axios.post('/api/auth/login', {
        username: values.username,
        password: values.password,
        role: 'ADMIN'
      });

      if (response.data.code === 200) {
        message.success('登录成功');
        // 构造用户信息对象
        const userInfo = {
          id: response.data.data.userId,
          phone: response.data.data.phone,
          role: response.data.data.role,
          realName: '系统管理员' // 临时设置，后续可从后端获取
        };
        onLoginSuccess(userInfo, response.data.data.token);
      } else {
        message.error(response.data.message || '登录失败');
      }
    } catch (error) {
      console.error('登录错误:', error);
      message.error('登录失败，请检查网络连接');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container">
      <div className="login-content">
        <Card className="login-card">
          <div className="login-header">
            <Title level={2} style={{ textAlign: 'center', marginBottom: 8 }}>
              招企人力外包平台
            </Title>
            <p style={{ textAlign: 'center', color: '#666', marginBottom: 32 }}>
              管理员登录
            </p>
          </div>

          <Form
            name="login"
            onFinish={onFinish}
            autoComplete="off"
            size="large"
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: '请输入用户名或手机号!' }
              ]}
            >
              <Input 
                prefix={<UserOutlined />} 
                placeholder="请输入用户名或手机号" 
                maxLength={50}
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                { required: true, message: '请输入密码!' },
                { min: 6, message: '密码至少6位!' }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="请输入密码"
              />
            </Form.Item>

            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                loading={loading}
                block
                style={{ height: 40 }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>

          <div className="login-footer">
            <p style={{ textAlign: 'center', color: '#999', fontSize: 12 }}>
              默认管理员账号：13800138000 / admin123
            </p>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Login;
